<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*地的样式*/
        #farm{
            width: 1024px;
            height: 768px;
            background: url("../img/demo5/back.jpg") no-repeat;
            padding-left: 150px;
            padding-top: 280px;
        }
    </style>
    <script>
        //按钮状态
        var status = 0;
        //定义1维数组 存放每块地的当前状态 1:空地 2：播种 3:发芽 4:开花 5:枯萎
        var d_status;

        //土地单击后的主方法
        function tillLand(id){
            var id = parseInt(id);
            //播种
            if (status == 1 && d_status[id] == 1){
                sow(id);
                setTimeout("sprout("+id+")",5000);
                setTimeout("bloom("+id+")",10000);
            }
            //收获
            if (status == 2 && d_status[id] == 4){
                harvest(id);
            }
            //翻地
            if (status == 3 && d_status[id] == 5){
                stir(id);
            }

        }

        window.onload = function (){
            //为每块地初始化
            d_status = new Array(21);
            for (var i = 1; i < d_status.length; i++) {
                d_status[i] = 1;
            }
        }

        //按钮单击后改变status的状态
        function changeStatus(i){
            status = i;
        }

        //播种方法
        function sow(id){
            document.getElementById(id).src = "../img/demo5/seed.png";
            d_status[id] = 2;
        }
        //发芽
        function sprout(id){
            document.getElementById(id).src = "../img/demo5/bud.png";
            d_status[id] = 3;
        }
        //开花
        function bloom(id){
            document.getElementById(id).src = "../img/demo5/flower.gif";
            d_status[id] = 4;
        }
        //收获 枯萎
        function harvest(id){
            document.getElementById(id).src = "../img/demo5/harvest.png";
            d_status[id] = 5;
        }
        //翻动
        function stir(id){
            document.getElementById(id).src = "../img/demo5/none.png";
            d_status[id] = 1;
        }
    </script>
</head>
<body>
    <!-- 定义一个div 存放non -->
    <div id="farm">
        <!-- 定义一个表格 放每块地 -->
        <table>
            <tr>
                <td><img src="../img/demo5/none.png" id="1" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="2" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="3" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="4" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="5" onclick="tillLand(this.id)"></td>
            </tr>
            <tr>
                <td><img src="../img/demo5/none.png" id="6" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="7" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="8" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="9" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="10" onclick="tillLand(this.id)"></td>
            </tr>
            <tr>
                <td><img src="../img/demo5/none.png" id="11" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="12" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="13" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="14" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="15" onclick="tillLand(this.id)"></td>
            </tr>
            <tr>
                <td><img src="../img/demo5/none.png" id="16" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="17" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="18" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="19" onclick="tillLand(this.id)"></td>
                <td><img src="../img/demo5/none.png" id="20" onclick="tillLand(this.id)"></td>
            </tr>
            <tr>
                <input type="button" value="播种" onclick="changeStatus(1)"/>
                <input type="button" value="采摘" onclick="changeStatus(2)"/>
                <input type="button" value="翻地" onclick="changeStatus(3)"/>
            </tr>
        </table>
    </div>
</body>
</html>